<template>
  <div style='width:100%;height:100%'>
    <div class='header'>
      <a-descriptions :title='formData.projectName' :column='4'>
        <a-descriptions-item label='项目编号'>
          {{ formData.projectId || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label='父级名称'>
          {{ formData.parentName || '-'}}
        </a-descriptions-item>
        <a-descriptions-item label='项目来源'>
          {{ projectSourceDict(formData.projectSource) || '-'}}
        </a-descriptions-item>
        <a-descriptions-item label='所属专业'>
          {{ fieldsDict(formData.major)|| '-' }}
        </a-descriptions-item>
        <a-descriptions-item label='承担单位'>
          {{ formData.unitList.map(v => v.value).join('、') || '-'}}
        </a-descriptions-item>
        <a-descriptions-item label='项目经理'>
          {{ formData.manager || '-'}}
        </a-descriptions-item>
        <a-descriptions-item label='WBS单号'>
          {{ formData.wbsId|| '-' }}
        </a-descriptions-item>
        <a-descriptions-item label='项目周期'>
          {{ formData.cycleTime || '-'}}
        </a-descriptions-item>
        <a-descriptions-item label='项目状态'>
          {{ statusDict(formData.status)|| '-' }}
        </a-descriptions-item>
        <a-descriptions-item label='项目总预算'>
          {{ formData.budget || '-' }}
        </a-descriptions-item>
      </a-descriptions>
    </div>
    <div>
      <a-menu v-model='current' mode='horizontal'>
        <a-menu-item key='0'>立项管理</a-menu-item>
        <a-menu-item key='1'>档案信息</a-menu-item>
      </a-menu>
    </div>
    <div class='container'>
      <project-management v-if='current[0]==0'></project-management>
      <archives v-if='current[0]==1' :title='formData.projectName'></archives>
    </div>
  </div>
</template>

<script>
import ProjectManagement from '@/views/project/initManage/detail/projectManagement.vue'
import Archives from '@/views/project/initManage/detail/Archives.vue'
import { detail } from '@/api/projectInitApply'

export default {
  components: { Archives, ProjectManagement },
  data() {
    return {
      current: ['0'],
      formData: {
        projectName: '',
        projectId: '',
        parentName: '',
        projectSource: '',
        major: '',
        manager: '',
        wbsId: '',
        cycleTime: '',
        status: '',
        budget: '',
        unitList: []
      }
    }
  },
  mounted() {
    if (this.$route.query.id) {
      detail({ id: this.$route.query.id }).then(res => {
        console.log(res.data)
        res.data.cycleTime = res.data.cycleStart + '~' + res.data.cycleEnd
        this.formData = res.data
      })
    }
  },
  methods: {
    projectSourceDict(source) {
      const options = [
        { label: '国家省部级', value: 0 },
        { label: '集团公司级', value: 1 },
        { label: '海油发展重大专项', value: 2 },
        { label: '海油发展重点攻关', value: 3 },
        { label: '海油发展常规', value: 4 },
        { label: '采油公司级', value: 5 }
      ]
      const res = options.filter(obj => obj.value == source)
      if (res.length) {
        return res[0].label
      } else return ''
    },
    statusDict(source) {
      const options = [
        { label: '筹备中', value: 0 },
        { label: '立项中', value: 1 },
        { label: '实施中', value: 2 },
        { label: '已完结', value: 3 }
      ]
      const res = options.filter(obj => obj.value == source)
      if (res.length) {
        return res[0].label
      } else return ''
    },
    typeDict(source) {
      const options = [
        { label: '科技项目', value: 0 },
        { label: '英才计划', value: 1 },
        { label: '三新三化项目', value: 2 },
        { label: '标准化项目', value: 3 }
      ]
      const res = options.filter(obj => obj.value == source)
      if (res.length) {
        return res[0].label
      } else return ''
    },
    fieldsDict(source) {
      const options = [
        { label: 'FPSO', value: 0 },
        { label: '边际油田', value: 1 },
        { label: '系泊', value: 2 },
        { label: 'LNG', value: 3 },
        { label: '非常规', value: 4 },
        { label: '生产技术服务', value: 5 },
        { label: '数字化', value: 6 },
        { label: '其他', value: 7 }
      ]
      const res = options.filter(obj => obj.value == source)
      if (res.length) {
        return res[0].label
      } else return ''
    }
  }

}
</script>

<style scoped lang='less'>
.header {
  width: 100%;
  //height: 100px;
  background: #fff;
  padding: 12px 12px 12px 16px;
  margin: 0 0 12px 0;
}

.container {
  width: 100%;
  min-height: 800px;
  display: flex;
  padding-bottom: 100px;
}

.main {
  flex: 1;
  background: blue;
}

//
//.slide {
//  width: 200px;
//  display: flex;
//  flex-direction: row;
//  justify-content: flex-start;
//  align-items: flex-start;
//  padding: 10px 20px;
//  background: #fff;
//}
//.tabs {
//  display: flex;
//  flex-direction: column;
//  justify-content: center;
//  align-items: center;
//  .tabtitle {
//    margin-bottom: 40px;
//    font-size: 16px;
//    width: 120px;
//    transition: all 0.3s ease;
//    display: flex;
//    align-items: center;
//    cursor: default;
//    color: #000;
//    font-weight: 800;
//    position: relative;
//    &:nth-child(4) {
//      .tiao {
//        border-left: 0 dashed #cacaca !important;
//      }
//    }
//    .icon {
//      height: 28px;
//      width: 28px;
//      border-radius: 50%;
//      background: #cacaca;
//      display: flex;
//      align-items: center;
//      justify-content: center;
//      margin-right: 8px;
//    }
//    i {
//      font-size: 16px;
//      color: #a0a0a0;
//    }
//    .tiao {
//      position: absolute;
//      top: 30px;
//      left: 14px;
//      transform: translate(-50%);
//      height: 40px;
//      width: 3px;
//      border-left: 1px dashed #cacaca;
//    }
//  }
//}
//.active {
//  color: #0a91ff !important;
//}
</style>

